/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,SafeAreaView
} from 'react-native';
import TableView from 'react-native-tableview'

const {Section, Item, Header} = TableView

export default class App extends Component {
    state = {
        page: 0,
        data: [],
        refreshState: null
    }

    componentDidMount() {
        // this.setState({refreshState: 'startRefresh'})
        this.onRefresh()
    }

    onRefresh() {
        setTimeout(() => {
            let data = []
            for (i = 0; i < 10; i++) {
                data.push(i)
            }
            this.setState({data: data, page: 1, refreshState: 'stopRefresh'})
        }, 2000)
    }

    onLoadMore() {
        setTimeout(() => {
            if(this.state.page < 4) {
                let lastData = this.state.data
                for(let i = 0; i < 10; i++) {
                    lastData.push(i)
                }
                this.setState({data: lastData, page: this.state.page + 1, refreshState: 'footerIdle'})
            }else {
                this.setState({refreshState: 'footerNoMore'})
            }
        }, 1000)

    }

    render() {
        console.log('this.state.data', this.state.data)
        console.log('this.state.page', this.state.page)
        return (
            <SafeAreaView style={styles.container}>
                <TableView
                    ref={v=> this.tableView = v}
                    style={{flex: 1, backgroundColor: 'pink'}}
                    canRefresh
                    refreshState={this.state.refreshState}
                    onRefresh={this.onRefresh.bind(this)}
                    onLoadMore={this.onLoadMore.bind(this)}
                    onPress={event => console.log(event)}
                >
                    <Header>
                        <View style={{backgroundColor: 'deeppink', height: 100, width: 375}}>
                            <Text>我是Header</Text>
                        </View>
                    </Header>
                    <Section>
                        {this.state.data.map((item,index) => <Item height={90} key={index}>{JSON.stringify(item)}</Item>)}
                    </Section>
                </TableView>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

});
